<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/admin' }">
      <i class="el-icon-s-promotion"></i> 后台管理
    </el-breadcrumb-item>
    <el-breadcrumb-item>费用列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-divider></el-divider>

  <el-card style="float: left ;width: 100%;height: 100%">
    <el-divider content-position="left">费用表格</el-divider>
    <!--    添加事件的按钮-->


    <!-- 事件列表   -->
    <el-table :data="this.financeArr" border style="width: 100%">

      <el-table-column type="index" label="编号" align="center" width="50"></el-table-column>
      <el-table-column prop="olderName" label="老人姓名" style="width: 6px "align="center"></el-table-column>
      <el-table-column prop="foodCost" label="每日套餐费" header-align="center" align="right"></el-table-column>
      <el-table-column prop="bedCost" label="每月床位费" header-align="center" align="right"></el-table-column>
      <el-table-column prop="foodCostByYear" label="年度套餐费" header-align="center" align="right"></el-table-column>
      <el-table-column prop="bedCostByYear" label="年度床位费" header-align="center" align="right"></el-table-column>
      <el-table-column prop="sumCost" label="年度基础费" header-align="center" align="right"></el-table-column>
      <el-table-column prop="serviceCost" label="年度服务费" header-align="center" align="right"></el-table-column>
      <el-table-column label="年度总费用" align="center" style="width: 100px"   >
        <template slot-scope="scope" header-align="center" align="right">
          <el-tag type="warning" effect="dark" style="font-weight: bold; font-size: 22px;width: 150px">¥:  {{scope.row.totalCost}}</el-tag>
        </template>
      </el-table-column>

    </el-table>
  </el-card>






</div>
</template>

<script>
export default {
  name: "FoodListView",
  data: function () {
    return {

      financeArr: [],




    }
  },
  methods: {


    loadFinanceList(){
      let url = 'http://localhost:8080/finance/list';
      console.log('url = ' + url);
      this.axios.create(
          {
            headers:{
              "Authorization":localStorage.getItem("jwt")
            }
          }
      ).get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.financeArr = responseBody.data;
        }
        console.log(this.financeArr)
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },



  },
  mounted() {
    this.loadFinanceList();

  }




}
</script>

<style scoped>

</style>